<script setup>
import {dateFormat} from "../../util/index.js";
import {genderFormat} from "../../util/project.js";
import {MINIO_AVATAR} from "../../const/index.js";
import MyList from "../../components/MyList.vue";
import MyNav from "../../components/MyNav.vue";

// 当前登录的用户信息
const loginUser = JSON.parse(sessionStorage.getItem('loginUser'));

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'House', label: 'DashBoard', url: '/DashBoard'},
  {icon: 'View', label: '个人信息'},
];

/* ==================== 用户详情 ==================== */

// 用户详情
const userInfo = [
  {label: '登录账号', value: loginUser['username']},
  {label: '用户昵称', value: loginUser['nickname']},
  {label: '手机号码', value: loginUser['phone']},
  {label: '电子邮件', value: loginUser['email']},
  {label: '用户性别', value: loginUser['gender'], type: 'tag', format: genderFormat},
  {label: '用户年龄', value: loginUser['age']},
  {label: '用户星座', value: loginUser['zodiac'], type: 'tag', tagType: 'primary'},
  {label: '所在省份', value: loginUser['province']},
  {label: '真实姓名', value: loginUser['realname']},
  {label: '身份证号', value: loginUser['idcard']},
  {label: '创建时间', value: loginUser['created'], format: dateFormat},
  {label: '修改时间', value: loginUser['updated'], format: dateFormat},
  {label: '用户描述', value: loginUser['info'], type: 'card', height: 210},
];
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <div class="personal-body">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="login-user-card">
          <el-image class="avatar" :src="MINIO_AVATAR(loginUser['avatar'])"/>
          <el-divider/>
          <h3 class="nickname">{{ loginUser['nickname'] }}</h3>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="login-user-info-card" header="当前用户详细信息">
          <my-list :items="userInfo" :column="2"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.personal-body {
  width: 90%; // 宽度
  margin: 20px auto 0; // 外边距

  .avatar {
    border-radius: 5%; // 圆角
  }

  .nickname {
    text-align: center; // 内容居中
  }
}
</style>